<template>
  <div class="post-list">
    <div class="row">
      <!-- 正文开始 -->
      <div class="col-md-12">
        <template v-for="(item, index) in result.list" :key="index">
          <div class="post type-post" @click="jumpDetail(item.id)">
            <div class="row">
              <div class="col-md-3">
                <!-- <div class="entry-meta text-end">
                  <div class="entry-published big">25</div>
                  <div class="entry-published medium">
                    {{ item.date.replace("T", " ") }}
                  </div>
                  <div class="name">by <strong>Admin</strong></div>
                </div> 
                -->
              </div>
              <div class="col-md-9 article-content">
                <div class="entry-image">
                  <img
                    :src="
                      $getImgUrlFromMediaById(item.featured_media_src_url)
                        ? $getImgUrlFromMediaById(item.featured_media_src_url)
                        : require('@/assets/image/banner-default.png')
                    "
                    class=""
                  />
                </div>
                <div class="entry-wrapper">
                  <h3 class="entry-title">
                    <a
                      @click="jumpDetail(item.id)"
                      :title="$wordpressDecodeHTML(item.title.rendered)"
                    >
                      {{ $wordpressDecodeHTML(item.title.rendered) }}
                    </a>
                  </h3>
                  <div class="entry-summary">
                    <!-- 
                      <p>
                      {{ $deleteHtmlTag(item.excerpt.rendered) }}
                    </p> 
                    -->
                    <a class="button" @click="jumpDetail(item.id)">Read More</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <!-- 正文结束 -->
      <!-- 分页开始 -->
      <div class="col-md-12 d-flex justify-content-center">
        <a-pagination
          v-model:current="params.page"
          v-model:pageSize="params.per_page"
          :total="result.total"
          show-less-items
          @change="onPageChange"
        />
      </div>
      <!-- 分页结束 -->
    </div>
  </div>
</template>

<script>
import { getArticleList } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";
export default {
  name: "BlogList",
  components: {},
  props: {
    keyword: {
      type: String,
      default: "",
    },
    category: {
      type: [String, Number],
      default: 5,
    },
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      params: {
        page: 1,
        per_page: 10,
        categories: computed(() =>
          proxy.$route.query.category ? proxy.$route.query.category : 5
        ),
        search: computed(() =>
          proxy.$route.query.keyword ? proxy.$route.query.keyword : ""
        ),
      },
      result: {
        list: [],
        total: 0,
      },
    });
    const refData = toRefs(data);
    onBeforeMount(() => {
      console.log("默认参数", proxy.$route.query);
      //
      methods.getList();
      //
    });
    onMounted(() => {});
    //
    const methods = {
      jumpDetail(id) {
        proxy.$router.push(`/blog/detail/${id}`);
      },
      onPageChange(pageNumber) {
        data.params.page = pageNumber;
        methods.getList();
      },
      getList() {
        getArticleList(data.params).then((res) => {
          // 获取总数
          let headers = res.headers;
          data.result.total = parseInt(headers["x-wp-total"]);
          //
          data.result.list = res.data;
        });
      },
    };
    //
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.type-post {
  margin-bottom: 100px;
  padding: 10px;

  .entry-meta {
    position: relative;
    height: 200px;

    .entry-published.big,
    .entry-published.medium {
      position: absolute;
      right: 0;
      background: #fe4c8d;
      color: #fff;
    }

    .entry-published.big {
      top: 90px;
      padding: 3px 10px;
      font-size: 34px;
      line-height: 1;
    }

    .entry-published.medium {
      top: 132px;
      font-size: 1rem;
      padding: 5px;
      line-height: 1;
    }

    .name {
      position: absolute;
      top: 170px;
      right: 0;
    }

    .name,
    .name strong {
      color: #464d50;
      font-size: 1rem;
      line-height: 1;
    }
  }

  .entry-image {
    margin-bottom: 30px;
    // max-height: 400px;

    img {
      width: 85%;
      height: 30vh;
    }
  }

  .entry-wrapper {
    .entry-title {
      font-size: 30px;
      font-family: "Source Sans Pro", sans-serif;
      color: #464d50;
      margin-bottom: 15px;
      line-height: 1;
      //
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .entry-summary p {
      line-height: 28px;
    }

    a.button {
      border-radius: 30px;
      padding: 20px 35px;
      line-height: 1;
    }
  }
}

.article-content {
  padding: 30px 0 30px 100px;
}

.article-content:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  cursor: pointer;
}
.post-list {
  // ::v-deep .ant-pagination {
  //   .ant-pagination-item {
  //     li a {
  //       line-height: 46px;
  //       margin: 0 5px;
  //       font-weight: 600;
  //     }

  //     a {
  //       display: inline-block;
  //       width: 50px;
  //       height: 50px;
  //       border: 2px solid #e4eaec;
  //       border-radius: 100%;
  //       color: #17192c;
  //     }
  //   }
  // }
}
</style>
